沒錯，你沒有看錯，雖然前面說 JS 是原型繼承，但在 ES6 以後新增了 class 關鍵字！！！

不過底層實作仍然是以原型繼承方式進行，所以基本上算是一個語法糖。
今天我們就來看一下如何使用吧！

class

首先先來看一個最簡單的 class 例子。

class Person{
    constructor(val){
        this.age = val;
    }
    say(){
        return "Hi!";
    }
}
var Jason = new Person(29);
Jason instanceof Person;//true
Jason.age;//29
Jason.say();//"Hi!"

在類別（class）中可以明確定義一個建構式函式，會在建立新的 Person 物件時被呼叫，在類別主體內也能直接新增方法。

當然我們也可以用原本的原型繼承來寫。

function Person(val){
    this.age = val;
}
Person.prototype.say = "HI!";

var Jason = new Person(29);

但是，要注意如果用類別的話要注意 Hoisting 的問題！！

var Jason = new Person(29);//ReferenceError: Person is not defined

class Person{
    constructor(val){
        this.age = val;
    }
    say(){
        return "Hi!";
    }
}

靜態方法 Static methods

一個類別的靜態方法，不需要被實例化就可以被呼叫，不過也無法被實例化的新物件使用，也就是只能類別層級使用。

class Person{
    constructor(val){
        this.age = val;
    }
    say(){
        return "Hi!";
    }
    static evilThink(){
        return "I want steal somthing"
    }
}
var Jason = new Person(29);
"evilThink" in Jason;//false
Person.evilThink();//"I want steal somthing"

用原型繼承可以這樣寫。

function Person(val){
    this.age = val;
}
Person.evilThink = function(){
    return "I want steal somthing"
}

Person.prototype.say = function(){
    return "HI!";
}

var Jason = new Person(29);
"evilThink" in Jason;//false
Person.evilThink();//"I want steal somthing"

extends 建立子類別

可以用 extends 建立子類別。

class Person{
    constructor(age,weight){
        this.age = age;
        this.weight = weight;
    }
    say(){
        return "Hi!";
    }
}

class trickyMan extends Person{
    say(){
        return "R~"
    }
}
var Jason = new trickyMan(29,96);

Jason instanceof Person;//true
Jason instanceof trickyMan;//true
Jason.say();//"R~"

用原型繼承則是這樣寫。

function Person(age,weight){
    this.age = age;
    this.weight = weight;    
}
Person.prototype.say = function(){
    return "HI!";
}

function tricky(){}
tricky.prototype.say = function(){
    return "R~";
}
var Jason = new tricky(29);

Jason.say();//"R~"

super 呼叫父類別

如果要在子類別呼叫父類別可以用 super 。

class Person{
    constructor(age,weight){
        this.age = age;
        this.weight = weight;
    }
    say(){
        return "Hi!";
    }
}

class trickyMan extends Person{
    say(){
        return super.say();
    }
}
var Jason = new trickyMan(29,96);
Jason.say();//"HI!"

如果用原型繼承來寫的話。

function Person(age,weight){
    this.age = age;
    this.weight = weight;    
}
Person.prototype.say = function(){
    return "HI!";
}

function tricky(){}
tricky.prototype.say = function(){
    return Person.prototype.say()
}
var Jason = new tricky(29);

Jason.say();//"HI!"

以上就是 class 的用法，一樣如果有錯誤及來源未附上也歡迎留言指正，那麼我們明天見。

參考資料：
MDN - class
忍者 JavaScript 開發技巧探秘